<template>
  <div>
    <div class="register">
      <div class="tab">
        <div class="tab-content">
          <img src="../../assets/images/logo.jpg" alt @click="$router.push('/')">
          <span class="tj">讨教</span>
          <span class="txz">通行证</span>
        </div>
      </div>
      <div class="login-box">
        <div class="box">
          <div class="box-logo">
            <img src="../../assets/images/logo.jpg" alt>
            <div class="box-msg">
              <div>讨教</div>
              <div>www.toojiao.com</div>
            </div>
          </div>
          <div class="box-username">
            <span>
              <i class="iconfont icon-all-yonghuming"></i>
            </span>
            <input type="text" placeholder="昵称将会显示在个人主页和评论里" v-model="uname">
          </div>
          <div class="box-photo">
            <span>
              <i class="iconfont icon-all-shouji"></i>
            </span>
            <input type="text" placeholder="请输入11位手机号码" v-model="number">
          </div>
          <div class="box-card">
            <span>
              <i class="iconfont icon-all-ziyuan"></i>
            </span>
            <input type="text" placeholder="请输入手机收到的验证码" v-model="msgcord">
            <button @click="sendCord">{{defaultCode}}</button>
          </div>
          <div class="box-psw">
            <span>
              <i class="iconfont icon-all-mima"></i>
            </span>
            <input type="password" placeholder="请输入登录密码（6位以上）" v-model="password">
          </div>
          <p v-if="username">
            <i class="iconfont icon-all-jinggao-"></i>
            <em>昵称请控制在2-10字符</em>
          </p>
          <p v-if="cord">
            <i class="iconfont icon-all-jinggao-"></i>
            <em>请输入验证码</em>
          </p>
          <p v-if="corderror">
            <i class="iconfont icon-all-jinggao-"></i>
            <em>验证码错误</em>
          </p>
          <p v-if="psw">
            <i class="iconfont icon-all-jinggao-"></i>
            <em>请输入密码</em>
          </p>
          <p v-if="phone">
            <i class="iconfont icon-all-jinggao-"></i>
            <em>请填写有效手机号码</em>
          </p>
          <p v-if="nophone">
            <i class="iconfont icon-all-jinggao-"></i>
            <em>手机号以被注册</em>
          </p>
          <div class="box-btn" @click="sumbit">立即注册</div>
          <div class="box-list">
            <div>已有帐号，</div>
            <div class="login" @click="$router.push('/login')">立即登录</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from '@/js/axios'
import qs from "qs";
export default {
  name: "register",
  data() {
    return {
      error:false,
      defaultCode: "获取验证码",
      username: false,
      cord: false,
      psw: false,
      nophone: false,
      phone: false,
      corderror: false,
      uname: "",
      number: "",
      msgcord: "",
      password: "",
      code: ""
    };
  },
  mounted() {
    this.phoneReg = /^1[34578]\d{9}$/;
    this.passwordReg = /[\u4E00-\u9FA5\uF900-\uFA2D]/;
  },
  methods: {
    sendCord() {
      if (!this.phoneReg.test(this.number)) {
        console.log(111)
        this.phone = true;
        this.username = false;
        this.cord = false;
        this.psw = false;
        return;
      }
     let param = {
        mobile: this.number
      }; 
      this.$axios
        .post("/api/App/User/Register/get_code", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {
          console.log(res.data.status);
          if (res.data.status === "0") {
            console.log(111);
            this.nophone = true;
            return;
          } else {
            if (this.defaultCode !== "获取验证码") {
              return;
            }
            this.defaultCode = "发送中";
            this.codeTimer();
            let str = res.data.data;
            console.log(str)
            this.code = str.substring(14,20);
            console.log(this.code);
          }
        });

    },
    sumbit() {
      if (this.uname === "") {
        this.username = true;
        this.cord = false;
        this.psw = false;
        this.phone = false;
        return;
      }
      console.log(this.code);
      if (this.msgcord === "") {
        this.cord = true;
        this.phone = false;
        return;
      }
      if (this.msgcord !== this.code) {
        this.corderror = true;
        return;
      }
      if (this.passwordReg.test(this.password)) {
        this.psw = true;
        this.username = false;
        this.cord = false;
        this.phone = false;
        return;
      }
      let param = {
        mobile: this.number,
        code: this.msgcord,
        nickname:this.uname,
        login_password:this.password
      };
      this.$axios
        .post("api/App/User/Register/register", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {
          this.$router.push("login");
        });
      
    },
    //获取验证码倒计时
    codeTimer() {
      let count = 60;
      let timer = setInterval(() => {
        count--;
        if (count < 0) {
          clearInterval(timer);
          this.defaultCode = "获取验证码";
          return;
        }
        this.defaultCode = count + "秒";
      }, 1000);
    }
  },
  components: {}
};
</script>
<style lang="scss" scoped>
.register {
  width: 100%;
  background: #d8d9d9;
  margin-top: -60px;
  height: 770px;
  .tab {
    //  width: 80%;
    //  margin: 0 auto;
    background: #fff;
    height: 70px;
    .tab-content {
      width: 80%;
      margin: 0 auto;
      display: flex;
      justify-content: flex-start;
      img {
        width: 60px;
        height: 60px;
        margin-top: 5px;
      }
      .tj {
        height: 40px;
        width: 60px;
        margin-top: 10px;
        line-height: 40px;
        //  padding-left:0px;
        margin-left: 20px;
        border-right: 1px solid #666;
        font-size: 18px;
      }
      .txz {
        height: 40px;
        width: 60px;
        margin-top: 10px;
        line-height: 40px;
        padding-left: 10px;
        font-weight: 900;
      }
    }
  }
  .login-box {
    margin-top: 50px;
    width: 100%;
    margin-bottom: 50px;
    .box {
      width: 70%;
      margin: 0 auto;
      background: #fff;
      height: 600px;
      .box-logo {
        padding-top: 50px;
        width: 280px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        img {
          width: 70px;
          height: 70px;
        }
        .box-msg {
          margin-left: 20px;
          height: 70px;
          text-align: left;
          // margin-top: 15px;
          div {
            font-size: 20px;
            font-weight: 700;
            // line-height: 0.5;
          }
        }
      }
      .box-username {
        height: 40px;
        width: 40%;
        margin: 0 auto;
        border: 1px solid #cdcfd1;
        display: flex;
        justify-content: space-between;
        border-radius: 3px;
        margin-top: 20px;
      }
      .box-photo {
        height: 40px;
        width: 40%;
        margin: 0 auto;
        border: 1px solid #cdcfd1;
        display: flex;
        justify-content: space-between;
        border-radius: 3px;
        margin-top: 20px;
      }
      .box-card {
        height: 40px;
        width: 40%;
        margin: 0 auto;
        // border: 1px solid #cdcfd1;
        border-right: 0;
        display: flex;
        justify-content: space-between;
        border-radius: 3px;
        margin-top: 20px;
        span {
          display: block;
          width: 10%;
          border: 1px solid #cdcfd1;
          i {
            font-size: 25px;
          }
        }
        input {
          width: 68%;
          border: 0;
          outline: none;
          border: 1px solid #cdcfd1;
          border-left: 0;
          padding: 0 20px;
          // margin-left: -23px;
        }
        button {
          width: 22%;
          border: 0;
          outline: none;
          box-shadow: 0 0 10px 1px #b5ceff;
          background: #4786ff;
          color: #fff;
          cursor: pointer;
          font-size: 14px;
        }
      }
      .box-psw {
        height: 40px;
        width: 40%;
        margin: 0 auto;
        border: 1px solid #cdcfd1;
        display: flex;
        justify-content: space-between;
        border-radius: 3px;
        margin-top: 20px;
      }
      span {
        display: block;
        width: 10%;
        border-right: 1px solid #cdcfd1;
        i {
          font-size: 25px;
        }
      }
      input {
        width: 90%;
        border: 0;
        outline: none;
        padding: 0 20px;
      }
      .box-btn {
        height: 40px;
        width: 40%;
        margin: 0 auto;
        background: #4786ff;
        font-size: 16px;
        color: #fff;
        margin-top: 20px;
        font-size: 20px;
        line-height: 40px;
      }
      .box-list {
        height: auto;
        padding-top: 10px;
        width: 40%;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        div {
          color: #c3c5c7;
          font-size: 16px;
        }
        .login {
          color: #666;
          &:hover {
            color: #4786ff;
          }
        }
      }
      p {
        height: 25px;
        width: 40%;
        margin: 0 auto;
        font-size: 12px;
        color: red;
        line-height: 25px;
        border: 1px solid #fc4c24;
        margin-top: 10px;
      }
    }
  }
}
</style>


